<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="style.css">
    <script src="flexible.js"></script>
    <!-- 
       js
            1，去掉 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 因为这个js已经动态添加过了
            2，dpr
            3,动态获取了html

        不用js    测量宽/2/100px
        用了js    测量宽/100px
     -->
     <style>
         body,html{
             height:100%;
         }
         body{
             display: flex;
             flex-direction: column;
             background: #f2f2f2;
         }
         header{
             width:7.5rem;
             height:0.88rem;
             background:#387ec2;
             text-align: center;
             line-height: 0.88rem;
             color: #fff;
             font-size:.3rem
         }
        section{
            flex:1;
            overflow-y: auto;
        }
         footer{
             width:7.5rem;
             height:0.88rem;
             background:#387ec2;
             text-align: center;
             line-height: 0.88rem;
         }
         nav{
             background: #fff;
             border-top: solid 1px #c8c7cc;
             border-bottom: solid 1px #c8c7cc;
             padding: .15rem .44rem .15rem .4rem;
             margin-top: .68rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
             
         }
         nav dl{
             display: flex;
         }
         nav dd{
             padding-left:.24rem;
         }
         nav dl img{
             width:1.27rem; height:1.27rem
         }
         nav dd p{
             color: #929292;
         }
         nav dd h2{
             font-size: .28rem;
             padding-top: .13rem;
         }
         section ul{
            background: #fff;
             border-top: solid 1px #c8c7cc;
             border-bottom: solid 1px #c8c7cc;
             margin-top: .68rem; 
             padding-left: .3rem;
         }
         section ul li{
             display: flex;
             border-bottom: solid 1px #c8c7cc;
             padding-right: .44rem;
             justify-content: space-between;
             line-height: .94rem;
         }
         section ul li img{
             width:.38rem; height:.4rem;
             vertical-align: middle;
             padding-right: .22rem;
         }
      
     </style>
</head>
<body>
    <header>
        我的
    </header>
    <section>
       <nav>
            <dl>
                <dt><img src="images/images/my_03.jpg" alt=""></dt>
                <dd>
                    <h2>静静</h2>
                    <p>查看个人信息</p>
                </dd>
            </dl>
            <a href="#">></a>
       </nav>
       <ul>
           <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
           <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
       </ul>
       <ul>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
    </ul>
    
    <ul>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
       
    </ul>
    <ul>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
    </ul>
    <ul>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
    </ul>
    <ul>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
        <li><p><img src="images/images/my_07.jpg" alt="">我的圈子</p><span>></span></li>
    </ul>


    </section>
    <footer></footer>
</body>
</html>